<template>
  <div
    class="custom-title"
    :style="{
      paddingTop: top,
      top: isFixed ? top : '',
      height,
    }"
    :class="{
      center: center,
      isFixed: isFixed,
    }"
    @click="go"
  >
    <van-icon name="arrow-left" v-if="showBack" />
    <span> {{ title }}</span>
    <slot />
  </div>
</template>
<script>
export default {
  data() {
    return {
      top: "40px",
      height: "32px",
    };
  },
  props: {
    title: String, // 标题
    showBack: {
      // 是否显示返回箭头
      type: Boolean,
      default: true,
    },
    center: {
      // 标题是否居中
      type: Boolean,
      default: false,
    },
    isFixed: {
      // 盒子是否固定定位
      type: Boolean,
      default: false,
    },
    backFn: {
      type: Function, // 返回事件
    },
  },
  mounted() {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.top = menuButtonInfo.top + "px";
    this.height = menuButtonInfo.height + "px";
  },
  methods: {
    go() {
      if (this.backFn) {
        return this.backFn();
      }
      try {
        uni.navigateBack({});
      } catch (error) {}
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-title {
  display: flex;
  padding-left: 10px;
  align-items: center;
  box-sizing: content-box;
  background: #fff;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  letter-spacing: 2px;
  text-align: right;
  padding-bottom: 10px;
  font-style: normal;
  z-index: 999;
  span {
    padding-left: 4px;
  }
}
.center {
  justify-content: center;
}
.isFixed {
  position: absolute;
  padding-top: unset !important;
  width: 100%;
  background: unset;
  color: #fff;
}
</style>
